<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/sub-organize.css" />
		<style type="text/css">
			/*.mui-bar .mui-title {
				right: 73px;
			}*/
		</style>
	</head>

	<body>
		<div id="pullrefresh">
			<header class="mui-bar mui-bar-nav">
				<h1 class="mui-title">通讯录</h1>
				<!--<a class="mui-icon iconfont icon-qingdan mui-pull-right" href="#popover" id='btndepart'></a>-->
				<a class="mui-icon iconfont icon-sousuo mui-pull-right" style="margin-right: 5px;" id='btnsearch'></a>
			</header>
			<div class="mui-content" id="organize" v-cloak>
				<div class="list-groups">
					<div class="title title-sz">
						群组
					</div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="#" id='btngroups'>
								<div class="mui-col-xs-12">
									<img class="mui-media-object mui-pull-left" style="border-radius: 3px;" src="../images/groups.jpg">
									<div class="mui-media-body" style="font-size: 16px; line-height: 45px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
										组织内部群组
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="list-single" v-show="items.length > 0">
					<div class="title title-sz">
						组织架构
					</div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell orgs" v-for="item in items" @click='showDetail(item)'>
							<img class="mui-media-object mui-pull-left" style="border-radius: 3px;" src="../images/dzz.jpg">
							<div class="mui-media-body listzx" style="font-size: 16px; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
								{{item.name}}
							</div>
						</li>
					</ul>
				</div>
				<div class="list-single" v-show="items.length ==0">
					<div class="title title-sz" style="text-align: center;font-size: 16px;">
						通讯录数据异常,请刷新重试
					</div>
				</div>

				<div id="popover" class="mui-popover">
					<div class="message bottom" style="display: block;">
						<div class="mui-row">
							<div class="icon">
								<span class="mui-icon iconfont icon-zhibuhuodong"></span>
							</div>
							<p class="content">组织名称：中共产业集团投资集团有限责任公司</p>
						</div>
						<div class="mui-row">
							<div class="icon iconfont">
								<span class="mui-icon iconfont icon-organizationalstruc-copy"></span>
							</div>
							<p class="content">组织情况：党委 6 个、总支 2 个、支部 47 个；共有党员987名，其中在职党员679名，离退休党员308名；集团本部共有党员68名。</p>
						</div>
						<div class="mui-row">
							<div class="icon">
								<span class="mui-icon iconfont icon-qingdan"></span>
							</div>
							<p class="content">成立时间：2008年8月6日</p>
						</div>
						<div class="mui-row">
							<div class="icon">
								<span class="mui-icon iconfont icon-qingdan"></span>
							</div>
							<p class="content">换届时间：2018年8月6日</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
	var first = false;
	var organizevm;
	var organizedata = [];
	var organizations = localStorageFunc.get('organize'); // 存储组织机构到本地缓存
	$.each(organizations, function(index, item) {
		if(item.parentId == null) {
			organizedata.push(item);
		}
	});

	mui.init({
		pullRefresh: {
			container: '#pullrefresh',
			down: {
				style: 'circle',
				height: 50, //可选,默认50.触发下拉刷新拖动距离,
				contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
				contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
				contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
				style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				range: '100px', //可选 默认100px,控件可下拉拖拽的范围
				offset: '0px', //可选 默认0px,下拉刷新控件的起始位置				
				callback: pulldownRefresh
			}
		}
	});

	mui.plusReady(function() {
		organizevm = new Vue({
			el: '#organize',
			data: {
				items: ''
			},
			methods: {

				//	组织架构列表
				showDetail: function(item) {
					mui.openWindow({
						url: '/html/organize-groups-list.html',
						id: 'organize-groups-list',
						createNew: false,
						extras: {
							"info": item
						},
						show: {
							autoShow: true,
							aniShow: 'slide-in-right',
							duration: 300
						},
						waiting: {
							autoShow: false,
							title: '正在加载...'
						}
					})
				}
			}

		});

		render();
		initEvt();
	});

	//	初始化事件
	function initEvt() {

		//	搜索
		mui('body').on('tap', '#btnsearch', function() {
			mui.openWindow({
				url: '/html/organize-search.html',
				id: 'organize-search',
				createNew: false,
				/*extras: {
					'chattype': '1', //chattype类型：0 单聊 ; 1 群聊
					"userid": grounpid, //自定义扩展参数，可以用来处理页面间传值
					"notestype": grounpname
				},*/
				show: {
					autoShow: true,
					aniShow: 'slide-in-right',
					duration: 300
				},
				waiting: {
					autoShow: false,
					title: '正在加载...'
				}
			})
		});

		//	查看群聊列表信息
		mui('body').on('tap', '#btngroups', function() {
			mui.openWindow({
				url: '/html/organize-groups.html',
				id: 'organize-groups',
				createNew: false,
				/*extras: {
					'chattype': '1', //chattype类型：0 单聊 ; 1 群聊
					"userid": grounpid, //自定义扩展参数，可以用来处理页面间传值
					"notestype": grounpname
				},*/
				show: {
					autoShow: true,
					aniShow: 'slide-in-right',
					duration: 300
				},
				waiting: {
					autoShow: false,
					title: '正在加载...'
				}
			})
		})

	};

	// 下拉刷新具体业务实现
	function pulldownRefresh() {
		if(!first) {
			ctdj.user.getContacts(function(r) {
				if(r.success) {
					localStorageFunc.set('organize', r.result); // 存储组织机构到本地缓存
					var organizedata = []; // 构建新的组织架构数据
					organizevm.items = organizedata;
					$.each(r.result.organizations, function(index, item) {
						if(item.parentId == null) {
							organizedata.push(item);
						}
					});
					organizevm.items = organizedata;
					setTimeout(function() {
						if($(".listzx").length > 0) {
							$.each($(".listzx"), function(index, item) {
								if($(item).height() <= 30) {
									$(item).css('line-height', '45px');
								} else {
									$(item).css('line-height', '20px');
								}
							})
						}
					}, 400);
				}
			})
		}

		setTimeout(function() {
			mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
		}, 500);

	}

	function render() {
		var organizedata = []; // 构建新的组织架构数据
		var orgs = localStorageFunc.get('organize'); // 存储组织机构到本地缓存

		$.each(orgs.organizations, function(index, item) {
			if(item.parentId == null) {
				organizedata.push(item);
			}
		});

		organizevm.items = organizedata;

		setTimeout(function() {
			if($(".listzx").length > 0) {
				$.each($(".listzx"), function(index, item) {
					if($(item).height() <= 30) {
						$(item).css('line-height', '45px');
					} else {
						$(item).css('line-height', '20px');
					}
				})
			}
		}, 400);
	}
</script>